import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Row, Col, Radio } from 'antd';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 8,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 16,
    },
  },
};
class BusinessInfor extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const { onRefs } = this.props;
    onRefs(this);
  }

  // 获取返款信息
  refunds = e => {
    this.setState({
      refundFlag: e.target.value,
    });
  };

  // 获取参数
  myNameBuss = () => {
    const { form, refund } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      refund(values);
    });
  };

  render() {
    const { form, serTypeName } = this.props;
    const { refundFlag } = this.state;
    const { getFieldDecorator } = form;
    return (
      <div>
        <h3>业务信息</h3>
        <Form>
          <Row>
            <Col span={10}>
              <FormItem {...formItemLayout} label="服务类型:">
                {serTypeName}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={10}>
              <FormItem {...formItemLayout} label="是否有返款:">
                {getFieldDecorator('refundFlag', {
                  rules: [
                    {
                      required: true,
                      message: '请选择是否有返款',
                    },
                  ],
                  initialValue: '2',
                })(
                  <RadioGroup onChange={this.refunds}>
                    <Radio value="2">无返款</Radio>
                    <Radio value="1">有返款</Radio>
                  </RadioGroup>
                )}
              </FormItem>
            </Col>
          </Row>
          {Number(refundFlag) === 1 ? (
            <div>
              <Row>
                <Col span={10}>
                  <FormItem {...formItemLayout} label="收款方信息:">
                    {getFieldDecorator('payeeName', {
                      rules: [
                        {
                          required: true,
                          message: '请填写收款方信息',
                        },
                      ],
                    })(<Input />)}
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={10}>
                  <FormItem {...formItemLayout} label="收款方银行账号:">
                    {getFieldDecorator('payeeBankcardNo', {
                      rules: [
                        {
                          required: true,
                          message: '请填写收款方银行账号',
                        },
                      ],
                    })(<Input />)}
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={10}>
                  <FormItem {...formItemLayout} label="开户行信息:">
                    {getFieldDecorator('payeeBankOfDepo', {
                      rules: [
                        {
                          required: true,
                          message: '请填写开户行信息',
                        },
                      ],
                    })(<Input />)}
                  </FormItem>
                </Col>
              </Row>
            </div>
          ) : null}
        </Form>
      </div>
    );
  }
}

export default Form.create()(BusinessInfor);
